<!--开发者：曹雅琴
    开发时间：2017/7/13
    功能：点击放大显示图片 -->
<template>
  <div id="ImgDialog">
    <div class="black_overlay"></div>
    <div class="white_content" id="contain">
      <div @click="CloseDialog" class="icon-area">
        <i class="el-icon-circle-close"></i>
      </div>
      <img :src="url" id="img">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ImgDialog',
    props: ['url'],
    data () {
      return {}
    },
    mounted () {
      var imgObject = document.getElementById('img')
      if (imgObject.width > 400) {
        imgObject.width = imgObject.width / 3
        document.getElementById('contain').setAttribute('class', 'align-center')
      }
    },
    methods: {
      CloseDialog () {
        this.$emit('closeImg', false)
      }
    }
  }
</script>
<style scoped>
  .black_overlay {
    position: fixed;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 5001;
    filter: alpha(opacity=70);
    opacity: 0.7;
  }

  .white_content {
    position: absolute;
    top: 30%;
    left: 45%;
    max-width: 300px;
    z-index: 5002;
    overflow: auto;
  }

  .icon-area {
    z-index: 5003;
    position: absolute;
    right: 3px;
    top: 3px;
  }

  .icon-area:hover {
    color: red;
  }

  .align-center {
    position: absolute;
    top: 20%;
    left: 35%;
    z-index: 5002;
    overflow: auto;
  }
</style>
